<template>
  <div class="video-list">
    <share-shade ref="shareShades"></share-shade>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多数据了！"
      @load="onLoad"
    >
      <div class="video-list-wrap">
        <div 
        class="list-item" 
        v-for="(props, index) in imgsArr" :key="index">
          <div>
            <div class="img" @click="handleWatchEvent(props)">
              <img :src="props.src" alt="">
            </div>
            <div class="avatar-info">
              <div class="title">{{props.title}}</div>
              <div class="avatar">
                <img class="img" :src="props.head_portrait_url || defaultAvatar" alt="">
                <span class="name">{{props.nick_name}}</span>
                <div class="forward fr">
                  <div class="icon">
                    <img class="icon_like" @click.stop="handleLike(2, props)" v-if="props.is_praise == 1" src="https://img.wifenxiao.com/h5-wfx/images/like.png">
                    <img class="icon_like" @click.stop="handleLike(1, props)" v-else src="https://img.wifenxiao.com/h5-wfx/images/gray-like.png">
                  </div>
                  <span>{{Number(props.praise_points_num) > 100 ? '99+' : props.praise_points_num}}</span>
                </div>
                <div class="forward fr">
                  <div class="icon">
                    <wx-share
                      :videoItem="props"
                      shareType="videoDetail"
                      @shareSuccess="shareSuccess"
                      @openShareShade="openShareShade"></wx-share>
                  </div>
                  <span>{{Number(props.forwarding_number) > 100 ? '99+' : props.forwarding_number}}</span>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-list>
    
    <div class="noData" v-if="!listLoading && imgsArr.length <= 0">
      <div class="icon">
        <img src="https://img.wifenxiao.com/h5-wfx/images/item/question/noData.png" alt="">
      </div>
      <div class="txt">暂无数据</div>
    </div>
    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
  </div>
</template>

<script>
  /**
	 * @Author: yqe@360shop.cn
	 * @Date: 2019-09-26 18:48:09
	 * @Last Modified by: yqe@360shop.cn
	 * @Last Modified time: 2019-09-26 18:48:09
	 */
  // import axios from 'axios'
   import Vue from 'vue'
  import { List } from 'vant'
  Vue.use(List)
  import { getVideoList, shareCountAdd, communityPraise } from '@/api/community/video'
  import small from '@/smallapp/small'
  import SmallLogin from '@/components/SmallLogin/smallLogin'
  // import vueWaterfallEasy from 'vue-waterfall-easy'
  import Store from '@/utils/store'
  import videoDetail from '../videoDetail'
  import wxShare from '@/components/wxShare'
  import shareShade from '@/components/wxShare/shareShade'
  export default Vue.extend({
    name: 'index',
    data() {
      return {
        loading: false,
        finished: false,
        showVideoDialog: false,
        defaultAvatar: 'https://img.wifenxiao.com/h5-wfx/images/community/default_avatar.png',
        loadingDotStyle: {
          background: '#e43'
        },
        listLoading: false,
        imgsArr: [],
        detailId: '',
        postData: {
          size: 10,
          page: 1
        }
      }
    },
    components: {
      videoDetail,
      wxShare,
      shareShade,
      SmallLogin
    },
    methods: {
       // 点赞和取消点赞
      handleLike(type, val) {
        if (!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
          return false
        }
        this.$loadingWrap.show()
        this.detailId = val.video_id
        communityPraise({
          id: this.detailId,
          type: 2,
          add: type
        }).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            const imgsArr = this.imgsArr
            imgsArr.forEach(item => {
              if (item.video_id === this.detailId) {
                if (type == 1) {
                  item.is_praise = 1
                  item.praise_points_num = Number(item.praise_points_num) + 1
                } else if (type == 2) {
                  item.is_praise = 0
                  item.praise_points_num = Number(item.praise_points_num) - 1
                }
              }
            })
            this.imgsArr = imgsArr
          } else {
            this.$Error(res.msg)
            // msg: "你已取消过啦！"
            if (res.errorCode == 'Q00001') {
              item.is_praise = 0
              item.praise_points_num = Number(item.praise_points_num) - 1
            }
            // msg: "你已点赞过啦！"
            if (res.errorCode == 'Z00001') {
              item.is_praise = 1
              item.praise_points_num = Number(item.praise_points_num) + 1
            }
          }
        })
      },
      // 加载更多
      onLoad() {
        this.getVideoListPost()
      },
      /**
       * 分享成功之后抛出的函数
       * param.type: 1点赞数，2转发量，3播放量
       */
      shareSuccess() {
        this.$refs.shareShades.showShade = false
        shareCountAdd({ id: this.detailId, type: 2 }).then(res => {
          const imgsArr = this.imgsArr
          imgsArr.forEach(item => {
            if (item.video_id === this.detailId) {
              item.forwarding_number = Number(item.forwarding_number) + 1
            }
          })
          this.imgsArr = imgsArr
        })
      },
      /**
       * 分享按钮组件抛出的
       * 打开分享遮罩
       */
      openShareShade(val) {
        this.detailId = val.video_id
        this.$refs.shareShades.showShade = true
      },
      /**
       * 获取视频列表
       */
      getVideoListPost(type) {
        this.listLoading = true
        const params = Object.assign({ sid: this.$route.query.sid }, this.postData, true)
        getVideoList(params).then(res => {
          this.listLoading = false
          if (res.status === 1) {
            const resData = res.data
            this.$emit('articleBgImg', res.article_bg_img ? res.article_bg_img : '')
            if (resData.length < 10) {
              this.finished = true
            }
            resData.forEach(item => {
              item.src = item.video_cover_url
            })
            if (type === 'search') {
              this.imgsArr = resData
            } else {
              this.imgsArr = this.imgsArr.concat(resData)
            }
            this.postData.page++
          }
        })
      },
      /**
       * 列表卡片点击事件
       */
      handleWatchEvent(value) {
        this.$JumpName(this, 'video-detail', { detailId: value.video_id })
      },
      /**
       * 判断是否有缓存数据
       */
      loadingLocal() {
        const referrer = document.referrer
        const localUrl = window.location.href
        if (referrer === localUrl) {
          // console.log('刷新')
          this.postData.page = 1
          this.getVideoListPost()
        } else {
          const videoList = Store.fetchLocal('videoList')
          const page = Store.fetchLocal('videoPage')
          if (videoList.length > 5) {
            this.imgsArr = videoList
            this.postData.page = page
          }
          // console.log('回退')
        }
      }
    },
    mounted() {
      // TODO 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        // console.log('视频已经到底部了')
        this.onLoad()
      })
    },
    created() {
      this.getVideoListPost()
    }
  })
</script>

<style lang="scss">
  @import "../../../../styles/mixin";
  @import "../../../../styles/variables";
  .video-list{
    // width: calc(100% - 10px);
    width:100%;
    margin: 0 auto;
    padding-top: 10px;
    &-wrap{
      font-size: 0;
      padding: 14px;
      .list-item{
        display: inline-block;
        width: 49%;
        box-shadow: 0 2px 12px rgba(169, 169, 169, 0.3) !important;
        background: #fff;
        border-radius: 15px!important;
        overflow: hidden;
        margin-right: 2%;
        vertical-align: top;
        margin-bottom: 20px;
        &:nth-child(2n) {
          margin-right: 0;
        }
        .img{
          width: 100%;
          height: 300px;
          overflow: hidden;
          img{
            width: 100%;
          }
        }
      }
    }
    .avatar-info{
      padding: 20px;
      .title{
        font-size: 30px;
        color: #333333;
        @include showEllipsis;
      }
      .avatar{
        margin-top: 15px;
        font-size: 0;
        .img{
          @include alignTop;
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        .name{
          @include alignTop;
          @include showEllipsis;
          width: 60px;
          margin-top: 7px;
          margin-left: 10px;
          font-size: 26px;
          color: #666;
        }
        .forward{
          margin-top:2px;
          font-size: 24px;
          color: #666;
          .icon_like {
            width: 40px;
            height: 40px;
            margin-left: 20px;
          }
          span{
            @include alignTop;
            line-height: 42px;
          }
          .icon{
            margin-right: 6px;
            color: #d1d1d1;
            font-size: 36px;
            display: inline-block;
            &.active{
              color: $mainColor;
            }
          }
        }
      }
    }
  }
</style>
